<style lang="less">
    @import '../../styles/common.less';
    /*@import 'upload.less';*/
</style>
<template>
    <div >
        <Row type="flex" align="middle" class="height-100">
            <Upload
                    ref="upload"
                    action="/admin/user/upload"
                    name="file"
                    :headers="header"
                    :show-upload-list="false"
                    :format="['jpg', 'png', 'jpeg']"
                    :max-size="5120"
                    :on-success="handleSuccess"
                    :on-exceeded-size="handleMaxSize"
                    :on-format-error="handleFormatError" >
                <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
            </Upload>
        </Row>
    </div>
</template>

<script>
export default {
    name: 'uploadImg',
    data () {
        return {
            header: {'Access-Control-Allow-Origin' : '*'},
            img_url: '',
        };
    },
    methods: {
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg/png/jpeg 格式的图片'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 5M'
            });
        },
        handleSuccess (res, file) {
            console.log(file);
            if (res.code == 0) {
                this.img_url = res.data.img_url;
                this.$emit('uploadImg', this.img_url);
            } else {
                this.$Notice.error({
                    title: 'Error Warning',
                    desc: `Error：${res.msg}<br>`
                });
            }
        },
    },
};
</script>
